<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 50rpx;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		z-index: 999;
	}

	.top {
		padding: 20rpx 30rpx;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;
		line-height: 60rpx;
		position: relative;

		.line {
			width: 100%;

			.f28 {
				width: 50%;
			}
		}

		.line2 {
			>view {
				width: 50%;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.lbtn {
		margin: 60rpx auto;
	}

	.h1 {
		border-left: 6rpx solid #409eff;
		padding: 0 20rpx;
		transform: translateX(-20rpx);
		height: 40rpx;
		line-height: 40rpx;
	}

	.tip {
		width: 140rpx;
	}

	.clock {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.paybtn {
		width: 128rpx;
		height: 64rpx;
		border: 2rpx solid #409eff;
		border-radius: 34rpx;
		font-size: 28rpx;
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;

		.btn {
			width: 690rpx;
			height: 88rpx;
			opacity: 1;
			background: #ffffff;
			border: 2rpx solid #409eff;
			border-radius: 46rpx;
			margin: 30rpx;
		}
	}

	.header {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}


	.sbtn {
		width: 176rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
		margin: 40rpx 0;
	}

	.lbtn {
		width: 484rpx;
		margin-right: 0;
	}

	.lbtn2 {
		width: 690rpx;
		height: 88rpx;
		background: #ffffff;
		border: 2rpx solid #409eff;
		border-radius: 46rpx;
		margin: 40rpx auto;
	}
</style>

<template>
	<view class="content">
		<view class="nav bgwhite" id="nav">
			<u-tabs :list="nav" :is-scroll="false" bar-width="60" bar-height="4" :current="current" @change="change">
			</u-tabs>
		</view>
		<view :style="'height:'+navheight+'px;'"></view>

		<view v-if="current==0">
			<view class="header between-flex m-top30 f28">
				<view>创建人:{{info.createUser | user}}</view>
				<view>创建时间: {{info.createTime}}</view>
			</view>
			<view class="box ">
				<view class="between-flex m-bottom20">
					<view class="f28 h1 bold textColor">任务信息</view>
					<view class="clock align-flex blue f24" @click="showHistory=true">
						<image src="../../static/images/clock.png" mode=""></image>
						历史流程
					</view>
				</view>

				<u-line></u-line>
				<view class="gray align-flex ">
					<view class="tip">任务名称</view>
					<view class="textColor ">{{info.taskName}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">详细描述</view>
					<view class="textColor ">{{info.taskDesc}}</view>
				</view>
				<view class="line2 between-flex">
					<view class="gray  align-flex ">
						<view class="tip">责任人</view>
						<view class="textColor ">{{info.leaderUser | user}}</view>
					</view>
					<view class="gray  align-flex ">
						<view class="tip" style="white-space: nowrap;">紧急程度</view>
						<view style="white-space: nowrap;" class="textColor ">{{info.level | itemLevel}}</view>
					</view>
				</view>
				<view class="gray flex " v-if="info.partUser">
					<view class="tip">参与人</view>
					<view class="textColor " style="width:500rpx;">{{info.partUser.join(',') | users}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">计划时间</view>
					<view class="textColor ">{{info.planStartDate}} 至 {{info.planEndDate}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">预计工时</view>
					<view class="textColor ">{{info.planDays}}天</view>
				</view>
			</view>

		</view>
		<view v-if="current==1">
			<view class="box " v-for="item,index in taskChild" :key="index">
				<view class="between-flex m-bottom20">
					<view class="f28 h1 bold textColor">{{item.taskName}}</view>
					<view class="blue bold f24" :style="{color:$filterState(item.states).color}">
						{{$filterState(item.states).name }}
					</view>
				</view>

				<u-line></u-line>
				<view class="between-flex" @click="$navTo(PagesTaskRouterConfig.ChildDetail+'?id='+id+'&taskid='+item.id)">
					<view style="width:90%;">
						<view class="line2 between-flex">
							<view class="gray  align-flex ">
								<view class="tip">责任人</view>
								<view class="textColor ">{{item.leaderUser | user}}</view>
							</view>
							<view class="gray  align-flex ">
								<view class="tip" style="white-space: nowrap;">完成进度</view>
								<view style="white-space: nowrap;" class="textColor ">{{item.compRate}}%</view>
							</view>
						</view>
						<view class="gray align-flex ">
							<view class="tip">任务名称</view>
							<view class="textColor ">{{item.taskName}}</view>
						</view>
						<view class="gray align-flex ">
							<view class="tip">详细描述</view>
							<view class="textColor ">{{item.taskDesc?item.taskDesc:'无'}}</view>
						</view>
						<view class="gray align-flex ">
							<view class="tip">计划时间</view>
							<view class="textColor ">{{item.planStartDate}}至 {{item.planEndDate?item.planEndDate:'-'}}
							</view>
						</view>
					</view>
					<view class="gray">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

			</view>
			<view v-if="taskChild.length==0" style="position: fixed;top:40%;left:50%;transform: translateX(-50%);">
				<u-empty text="暂无子任务,请添加"></u-empty>

			</view>
		</view>

		<view class="space"></view>
		<view class="footer between-flex paddingBottom" v-if="current==0&&JSON.stringify(info)!='{}'">
			<view class="sbtn center-flex textColor bold f32" @click="$back">返回</view>
			<view>
				<view v-if="role==1||role==2">
					<view class="lbtn" @click="showSheet=true" v-if="info.states==1 || info.states==3">操作处理</view>
				</view>
				<view v-if="role==1">
					<view class="lbtn" @click="restart" v-if="info.states==4">取消暂停</view>
					<view class="lbtn" @click="restart" v-else-if="info.states==5">重启开启</view>
				</view>

			</view>

		</view>
		<view class="footer between-flex paddingBottom" v-if="current==1&&isCanAdd()">
			<view class="lbtn2 center-flex blue bold f32" @click="$navTo(PagesTaskRouterConfig.AddChild+'?id='+id)">添加子任务</view>
		</view>
		<u-popup mode="bottom" v-model="showHistory" :closeable="true" borderRadius="20">
			<history v-if="showHistory" :taskId="id" title="历史流程"></history>
		</u-popup>
		<!-- 处理 -->
		<u-popup mode="bottom" v-model="showDispose" :closeable="true" borderRadius="20">
			<dispose v-if="showDispose" :taskId="id" :role="role" @submit="showDispose=false;getinfo()"></dispose>
		</u-popup>
		<!-- 暂停 -->
		<u-popup mode="bottom" v-model="showSuspend" :closeable="true" borderRadius="20">
			<suspend v-if="showSuspend" :taskId="id" @submit="showSuspend=false;getinfo()"></suspend>
		</u-popup>
		<!-- 终止 -->
		<u-popup mode="bottom" v-model="showStop" :closeable="true" borderRadius="20">
			<stop v-if="showStop" :taskId="id" @submit="showStop=false;getinfo()"></stop>
		</u-popup>
		<!-- 转交 -->
		<u-popup mode="bottom" v-model="showRet" :closeable="true" borderRadius="20">
			<ret v-if="showRet" :taskId="id" @submit="showRet=false;getinfo()"></ret>
		</u-popup>
		<u-action-sheet :list="action" @click="click" v-model="showSheet"></u-action-sheet>
	</view>
</template>

<script>
	import history from '@/pagesTask/operation/history.vue'
	import dispose from '@/pagesTask/operation/dispose.vue'
	import suspend from '@/pagesTask/operation/suspend.vue'
	import stop from '@/pagesTask/operation/stop.vue'
	import ret from '@/pagesTask/operation/return.vue'
	import PagesTaskRouterConfig from '@/pagesTask/routerConfig.js'
	export default {
		components: {
			history,
			dispose,
			suspend,
			stop,
			ret
		},
		data() {
			return {
				PagesTaskRouterConfig,
				head: this.$head,
				navheight: 0,
				nav: [{
						name: '任务信息'
					}, {
						name: '子任务',
						count: 0

					}

				],
				current: 0,
				showHistory: false,

				showSheet: false,
				action: [{
						text: '处理'
					}, {
						text: '暂停'
					},
					{
						text: '转交'
					},
					{
						text: '终止'
					}
				],
				showDispose: false, //操作处理页
				showSuspend: false,
				showStop: false,
				showRet: false,
				id: 0,
				info: {},
				taskChild: [],
				userid: '',
				role: 1, //1负责人2参与人3无权限
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				let info = uni.createSelectorQuery().select("#nav");
				info.boundingClientRect((data) => {

					this.navheight = data.height

					console.log(this.navheight)
				}).exec()
				this.id = e.id

			})


		},
		onShow() {
			setTimeout(() => {
				this.getinfo()
			}, 300)
		},
		methods: {
			getRole() {
				this.userid = this.$getUser().id
				this.userid = Number(this.userid)
				console.log(this.userid, this.info.leaderUser)
				if (this.info.leaderUser == this.userid) {
					this.role = 1
				} else if (this.info.partUser && this.info.partUser.indexOf(this.userid) != -1) {
					this.role = 2
				} else {
					this.role = 3
				}
				console.log(this.role)
			},
			isCanAdd() {
				var userid = this.userid
				console.log('id', userid)
				if (this.info.createUser == userid || this.info.leaderUser == userid) {
					return true
				} else {
					return false
				}
			},
			getinfo() {
				this.$pop.ajaxPost('/bus/taskInfo/details', {
					id: this.id
				}).then(res => {

					this.info = res.body
					this.getRole()
					if (this.info.taskChild) {
						this.taskChild = this.info.taskChild
						this.nav[1].count = this.taskChild.length
					}
					if (this.nav[1].count > 0) {
						this.action = [{
							text: '终止'
						}]
					} else {
						if (this.role == 1) {
							this.action = [{
									text: '处理'
								}, {
									text: '暂停'
								},
								{
									text: '转交'
								},
								{
									text: '终止'
								}
							]
						} else if (this.role == 2) {
							this.action = [{
								text: '处理'
							}]
						}

					}

				})
			},
			change(index) {
				this.current = index;

			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.action[index].text}`)
				if (this.nav[1].count == 0) {
					if (index == 0) {
						this.showDispose = true
					} else if (index == 1) {
						this.showSuspend = true
					} else if (index == 2) {
						this.showRet = true
					} else {
						this.showStop = true
					}
				} else {
					if (index == 0) {
						this.showStop = true
					}
				}

			},
			restart() {
				this.$showloading()
				this.$pop.ajaxPost('/bus/taskInfo/start', {
					taskId: this.id,

				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg('操作成功')
						this.getinfo()
					} else {
						this.$msg(res.msg)
					}
				})

			}

		}
	}
</script>
